<template>
    <div id="PersonalCarbonBenefits">
        
        <div class="top_content">
            <div class="title">
                <h1>个人碳普惠</h1>
                <p>Government carbon management</p>
            </div>
        </div>
        
        <div class="mid_content clearfix">
            
            <div class="content_cont content_cont1">
                <div class="titleBG" style="width:130px">账户</div>
                <ul class="accountSecurity">
                    <li>
                        <div class="topimg"><img :src="signIn" alt=""></div>
                        <div class="bottomText">账户注册</div>
                    </li>
                    <li class="nextSign"><el-icon><ArrowRightBold /></el-icon></li>
                    <li>
                        <div class="topimg"><img :src="authentication" alt=""></div>
                        <div class="bottomText">账户认证</div>
                    </li>
                    <li class="nextSign"><el-icon><ArrowRightBold /></el-icon></li>
                    <li>
                        <div class="topimg"><img :src="credit" alt=""></div>
                        <div class="bottomText">调取个人信用度</div>
                    </li>
                    <li class="nextSign"><el-icon><ArrowRightBold /></el-icon></li>
                    <li>
                        <div class="topimg"><img :src="joinTeam" alt=""></div>
                        <div class="bottomText">加入个人碳库</div>
                    </li>
                </ul>
            </div>
            <div class="content_cont content_cont2">
                <div class="titleBG" style="width:130px">“碳”商场</div>
                <ul class="accountSecurity">
                    <li>
                        <div class="topimg"><img :src="merchantSettle" alt=""></div>
                        <div class="bottomText">商家入驻</div>
                    </li>
                    <li class="nextSign"><el-icon><ArrowRightBold /></el-icon></li>
                    <li>
                        <div class="topimg"><img :src="iconApply" alt=""></div>
                        <div class="bottomText">商品注册、提交申请</div>
                    </li>
                    <li class="nextSign"><el-icon><ArrowRightBold /></el-icon></li>
                    <li>
                        <div class="topimg"><img :src="toExamine" alt=""></div>
                        <div class="bottomText">平台审核</div>
                    </li>
                    <li class="nextSign"><el-icon><ArrowRightBold /></el-icon></li>
                    <li>
                        <div class="topimg"><img :src="toOnline" alt=""></div>
                        <div class="bottomText">商品上线</div>
                    </li>
                </ul>
            </div>
            <div class="content_cont content_cont3">
                <div class="titleBG" style="width:130px">绿色出行</div>
                <el-row :gutter="12">
                    <el-col :span="6">
                        <el-card shadow="hover"> 
                            <div class="title">电车 </div>    
                            <div class="spans">百度、滴滴打车等软件</div>
                            <div class="spans">私家车入网数据</div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover"> 
                            <div class="title">自行车  </div>    
                            <div class="spans">导航系统获取公里数</div>
                            <div class="spans">哈啰单车、小黄车等APP调用</div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="over"> 
                            <div class="title">走路</div>    
                            <div class="spans">手机自带软件</div>
                            <div class="spans">运动手环监测</div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="over">
                            <div class="title">其他</div>    
                            <div class="spans">···</div>
                            <div class="spans">···</div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <div class="content_cont content_cont4">
                <div class="titleBG" style="width:130px">绿碳、蓝碳</div>
                <el-row :gutter="12">
                    <el-col :span="6">
                        <el-card shadow="hover"> 
                            <div class="title"> 森林面积：耕作面积</div>  
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover"> 
                            <div class="title"> 测算、上报 </div>    
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover"> 
                            <div class="title"> 审核、校定 </div>    
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <div class="content_cont content_cont5">
                <div class="titleBG" style="width:130px">个人碳积分</div>
                <el-row :gutter="12">
                    <el-col :span="6">
                        <el-card shadow="hover"> 
                            <div class="title"> 碳商城购买商品 </div>    
                            <div class="spans">直接积分</div>
                            <div class="spans">···</div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover"> 
                            <div class="title"> 线下、其他软件购买商品 </div>    
                            <div class="spans">上传照片--审核--积分</div>
                            <div class="spans">···</div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="over"> 
                            <div class="title"> 蓝碳、绿碳量--指标 </div>    
                            <div class="spans">上传照片--审核--积分</div>
                            <div class="spans">···</div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="over">
                            <div class="title"> 碳积分兑换 </div>    
                            <div class="spans">碳商场-购买/CCER购买</div>
                            <div class="spans">碳币-人民币兑换机构</div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <div class="content_cont content_cont6">
                <div class="titleBG" style="width:130px">个人信用度</div>
                <el-row :gutter="12">
                    <el-col :span="6">
                        <el-card shadow="hover"> 
                            <div class="title"> 审核 </div>    
                            <div class="spans">银行贷款等资产负债</div>
                            <div class="spans">犯罪记录等恶劣行为</div>
                            <div class="spans">村、县相关部门认定</div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover"> 
                            <div class="title"> 评定 </div>    
                            <div class="spans">···</div>
                            <div class="spans">···</div>
                            <div class="spans">···</div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <!-- <div class="titleBG" style="width:130px">生活减排</div>
            <div class="content">
                <el-image :src="url1" :preview-src-list="srcList" fit="cover" hide-on-click-modal="true"/>
            </div>
            <div class="titleBG" style="width:130px">碳积分方案</div>
            <div class="content">
                <el-image :src="url2" :preview-src-list="srcList" :initial-index="1" fit="cover"  hide-on-click-modal="true"/>
            </div> -->
        </div>
    </div>
</template>

<script>

import signIn from '../../assets/signIn.png';
import authentication from '../../assets/authentication.png';
import credit from '../../assets/credit.png';
import joinTeam from '../../assets/joinTeam.png';
import merchantSettle from '../../assets/merchantSettle.png';
import iconApply from '../../assets/iconApply.png';
import toExamine from '../../assets/toExamine.png';
import toOnline from '../../assets/toOnline.png';
import cycle from '../../assets/cycle.png';
import powerCar from '../../assets/powerCar.png';
import runing from '../../assets/runing.png';
import others from '../../assets/others.png';
export default {
  data() {
    return {
            url1:require('../../assets/shenghuojianpai.png'),
            url2:require('../../assets/tanbi.png'),
            srcList:[require('../../assets/shenghuojianpai.png'),require('../../assets/tanbi.png')],
            signIn,authentication,credit,joinTeam,merchantSettle,iconApply,toExamine,toOnline,cycle,powerCar,runing,others,
        
    }
  },
  methods:{
    load(){

    },
    toDetail(index){
      this.$router.push({path:'articleRead',query:{back:'/'}});
    },
    toMore(){

    },
  },
  mounted(){
    window.scrollTo(0,0);
  }
}
</script>


<style scoped>
#AboutUs{
    position: relative;
}
.top_content{
    width:100%;
    height:480px;
    background: url("../../assets/b.png");
    background-size: cover !important;
    background-repeat: round !important;
    text-align: center;
    overflow:hidden;

}
.top_content .title{
    margin-top: 60px;
    color: #333;
}
.mid_content{
    width: 1080px;
    position:relative;
    left: 50%;
    margin-left:-540px;
    top:-300px;
    min-height: 600px;
    -webkit-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    -moz-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    background: #ffffff;
    padding: 30px 40px;
    box-sizing: border-box;
}
.mid_content_left{
    width: 30%;
    float: left;
}
.mid_content_right{
    width: 70%;
    float: left;
}
.leftTitle{
    line-height: 40px;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom:20px;
}
.leftContent{
    width: 49%;
    float: left;
    text-align:center;
}
.divider{
    width:2%;
    float: left;
}
.rightContent{
    width: 49%;
    float: right;
    text-align:center;
}
ul{
    list-style: none;

}
.content{
    width:100%;
    text-align: center;
}
.content img{
    max-width:100%;
    margin:auto;
}
.titleBG{
    width: 100px;
    height: 60px;
    background:url('../../assets/bgtitle.png');
    background-size: cover !important;
    background-repeat: round !important;
    text-align: center;
    overflow:hidden;
    line-height: 80px;
    color:#666;
    margin-bottom:10px;
}
.accountSecurity{
    display:flex;
    width:100%;

}
.accountSecurity li{
    flex:1;
    text-align:center;
    color:#666;
}
.nextSign{
    line-height:80px;
}
.content_cont{
    margin-top:10px;
}
.content_cont .title{
    font-weight: blod;
    color:#333;
    font-size:16px;
}
.content_cont .spans{
    font-size:14px;
    color:#666;
    margin-top:10px;
}
</style>